<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="/admin/layui/css/layui.css" media="all"/>
</head>
<style>
    .layui-table-cell {
        height: auto !important;
        white-space: normal;
    }

    /*.laytable-cell-1-photo_url{  !*最后的pic为字段的field*!*/
        /*height: 100%;*/
        /*max-width: 100%;*/
    /*}*/
</style>
<body>
<!--<div style="padding-bottom: 10px;">-->
    <!--<button class="layui-btn layuiadmin-btn-list" data-type="batchdel">删除</button>-->
    <!--<button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>-->
<!--</div>-->
<table class="layui-hide" id="productTableId" lay-filter="productTableFilter"></table>

<!--<script type="text/html" id="toolbarDemo">-->
    <!---->
<!--</script>-->

<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-normal" lay-event="deliver" id="deliverGood-btn"><i class="layui-icon">&#xe608;</i>上货</button>
    <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="binding">删除</a>-->
</script>


<script src="/admin/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table','jquery','element','form','layer'], function(){
        var table = layui.table
            , $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            , element = layui.element;

        table.render({
            elem: '#productTableId'
            ,url:'/product/getAllProduct'
            ,toolbar: '#toolbarDemo'
            ,cellMinWidth: 200 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,title: '用户数据表'
            ,limit:20
            ,totalRow:true
            ,cols: [        //  "[["需要将两个括号拆开换行，因为[[…]]之间的表达式在Thymeleaf被认为是内联表达式
                [
                    {type: 'checkbox',},
                    {field:'item_id', title:'商品ID', width:110, unresize: true, sort: true,align:'center'}
                    ,{field:'title', title:'商品名', width:300,align:'center'}
                    ,{field:'price', title:'价格(元)', width:120,sort: true,align:'center',templet:function(res){
                        return res.price/100;
                    }}
                    ,{field:'image', title:'图片', width:150, align:'center',templet: function(res){
                        console.log(res);
                        return '<img src="'+res.image+'"></img>';
                        // return '<img src="'+JSON.parse(JSON.parse(JSON.stringify(res)).photo_url)[0].url+'"></img>';
                    }}
                    ,{field:'quantity', title:'总库存', width:120,sort: true,align:'center'}
                    // ,{field:'spu_code', title:'SPU_Code', width:200,align:'center'}
                    // ,{field:'spu_no', title:'SPU_No',width:200,align:'center'}
                    // ,{field:'unit', title:'单位', width:80, sort: true,align:'center'}
                    ,{field:'created_time', title:'创建时间', width:200,sort: true,align:'center'}
                    // ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150,align:'center'}
                ]]
            ,page: true,id:'productTable',
            // parseData:function (res) {
            //     return  {
            //         "code": res.status, //解析接口状态
            //         "msg": res.message, //解析提示文本
            //         "count": res.data.spus.length, //解析数据长度
            //         "data": res.data.spus //解析数据列表
            //     }
            // }
        });

        // table.reload('productTable',{});

        //监听搜索
        form.on('submit(member-search)', function(data){
            var field = data.field;
            layer.alert(JSON.stringify(field), {
                title: '搜索信息'
            })
            //执行重载
            // table.reload('productTable', {
            //     where: field
            // });
        });

        $(document).on("click", "#deliverGood-btn", function () {
            var checkedBox = table.checkStatus('productTable');
            var checkedData = checkedBox.data;      //获取选中的数据
            console.log(checkedData);
            if(checkedData.length > 1 || checkedData.length < 1){
                layer.alert("请选中一种商品进行上货",{icon:0});
                return;
            }
            var itemId = checkedData[0].item_id;
            layer.open({
                type: 2 //此处以iframe举例
                , title: "机器上货"
                // , area: ['520px', ($(window).height())+'px']
                , area: ['900px', '400px']
                , shade: 0,
                // , offset:'rb',
                scrollbar: false,
                shade:0.5,
                shift: 2,
                // btn: '',
                fixed:false,
                resize:false,
                yes:function(index, layero){
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var itemId = body.find('input[name=itemId]').val();
                    var num = body.find('input[name=num]').val();
                    var lineSort = body.find('input:radio[name=lineSort]').val();
                    console.log("itemId====="+itemId);
                    console.log("num====="+num);
                    console.log("lineSort====="+lineSort);
                    var machineId = iframeWin.checkMachine();
                    console.log("machineId====="+machineId);
                    if(!machineId){
                        alert("请选择一台机器上货!");
                    }else{
                        alert(9999999);
                        // $.ajax({
                        //     type: "POST",
                        //     url: '/machine/binding',
                        //     async:false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
                        //     data:{
                        //         phone: phone,
                        //         machineId:machineId
                        //     },
                        //     success: function(result) {
                        //         console.log(result);
                        //         if(result.status == 200){
                        //             layer.close(index);
                        //             layer.msg("绑定成功！",{icon:1},function () {
                        //                 table.reload('machineTable');
                        //             });
                        //         }else{
                        //             layer.alert(result.message);
                        //         }
                        //     },
                        //     error: function(error) {
                        //         alert(error.status);
                        //     }
                        // });
                    }
                },
                scrollbar:true,
                shadeClose:true,
                move:true
                , maxmin: false
                , content: '/product/deliverGood?itemId='+itemId
                , zIndex: layer.zIndex //重点1
                , success: function (layero) {
                    layer.setTop(layero); //重点2
                }
            });
        })



        //头工具栏事件
        table.on('tool(productTableFilter)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
            };
        });

        //监听行工具事件
        table.on('toolbar(productTableFilter)', function(obj){
            var data = obj.data;
            console.log(obj);
            if(obj.event === 'deliver'){
                var checkedBox = table.checkStatus('productTable');
                var checkedData = checkedBox.data;      //获取选中的数据
                console.log(checkedData);
                if(checkedData.length > 1 || checkedData.length < 1){
                    layer.alert("请选中一种商品进行上货",{icon:0});
                    return;
                }
                var itemId = checkedData[0].item_id;
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: "机器上货"
                    // , area: ['520px', ($(window).height())+'px']
                    , area: ['600px', '400px']
                    , shade: 0,
                    // , offset:'rb',
                    scrollbar: false,
                    shade:0.5,
                    shift: 2,
                    btn: '确定',
                    fixed:false,
                    resize:false,
                    yes:function(index, layero){
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        var itemId = body.find('input[name=itemId]').val();
                        var lineSort = body.find('input:radio[name=lineSort]').val();
                        console.log("itemId====="+itemId);
                        console.log("lineSort====="+lineSort);
                        var machineId = checkMachine;
                        console.log("machineId====="+machineId);
                        if(!machineId){
                            alert("请选择一台机器上货!");
                        }else{
                            alert(9999999);
                            // $.ajax({
                            //     type: "POST",
                            //     url: '/machine/binding',
                            //     async:false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
                            //     data:{
                            //         phone: phone,
                            //         machineId:machineId
                            //     },
                            //     success: function(result) {
                            //         console.log(result);
                            //         if(result.status == 200){
                            //             layer.close(index);
                            //             layer.msg("绑定成功！",{icon:1},function () {
                            //                 table.reload('machineTable');
                            //             });
                            //         }else{
                            //             layer.alert(result.message);
                            //         }
                            //     },
                            //     error: function(error) {
                            //         alert(error.status);
                            //     }
                            // });
                        }
                    },
                    scrollbar:true,
                    shadeClose:true,
                    move:false
                    , maxmin: false
                    , content: '/product/deliverGood?itemId='+itemId
                    , zIndex: layer.zIndex //重点1
                    , success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }else if(obj.event == 'binding'){
            }
        });
    });
</script>

</body>
</html>